<template>
  <view class="pay-details">
    <uni-list>
      <uni-list-item
        thumb="https://minio.gzryzl.com/huatai/2024-08-26/1724677657062必填.png"
        thumb-size="min"
        title="户号"
        :rightText="account"
      />
      <uni-list-item
        thumb="https://minio.gzryzl.com/huatai/2024-08-26/1724677657062必填.png"
        thumb-size="min"
        title="付款周期"
        @click="cycleChange"
        :link="validate"
        :rightText="cycle"
      />
      <uni-list-item
        thumb-size="min"
        title="宽带租金"
        :rightText="`${rent}元/月`"
      />
      <uni-list-item
        thumb-size="min"
        title="应付金额"
        :rightText="`${amount}元`"
      />
      <uni-list-item
        thumb-size="min"
        title="下次缴费时间"
        :rightText="time"
      />
    </uni-list>
    <up-picker
      :show="roomShow"
      @confirm="roomClick"
      @cancel="roomShow = false"
      :columns="roomList"
      keyName="name"
    ></up-picker>
    <up-modal
      :show="pattern"
      @confirm="payBroadbandOrder"
      @cancel="pattern = false"
      ref="uModal"
      :showCancelButton="true"
      :asyncClose="true"
    >
      <view class="box">
        <view class="title"> 缴费确认 </view>
        <view class="content_box">
          您正在对房间<text class="room">
            {{
            account
          }}</text>进行缴费，请确认金额和房号，如缴错费用，概不退款，请认真检查
        </view>
      </view>
    </up-modal>
    <view class="room-btn broadband">
      <button class="btn" @click="validateChange">确认缴费</button>
    </view>
  </view>
</template>

<script setup>
import { payBroadbandCorporateOrderApi } from "@/package_property/pages/api/my.js";
import { getDictConfigListByType } from "@/package_property/pages/api/home.js";
import UniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const account =ref("301");
const cycle =ref("月付");
const cycleNum =ref(1);
const rent =ref(36);
const amount =ref(0);
const time =ref(getNextMonthDate());
const roomShow = ref(false);
const validate = ref(true);
const pattern = ref(false);
const roomList = ref([
  [
    {
      name: "月付",
      id: 1,
    },
    {
      name: "季付",
      id: 3,
    },
    {
      name: "半年付",
      id: 6,
    },
    {
      name: "年付",
      id: 12,
    },
  ],
]);
function cycleChange () {
    if (validate.value) {
        roomShow.value =  true;
    }
}
function validateChange () {
  pattern.value = true;
    // if (validate.value) {
    //     validate.value = false;
    // }else {
    //     console.log("进行付费");
        
    // }
}
const roomClick = (n) => {
  console.log("change", n);
  cycle.value = n.value[0].name;
  cycleNum.value = n.value[0].id;
  amount.value = cycleNum.value*rent.value;
  roomShow.value = false;
};
// 宽带月租
async function getBroadbandMonthlyRent() {
  const res = await getDictConfigListByType("1830864481711304706");
  const { code, data } = res || {};
  if (code == 200) {
    rent.value = Number(data[0].children[0].filedName);
    amount.value= cycleNum.value*rent.value
  }
}
// 日期推算
function getNextMonthDate() {
  const now = new Date();
    const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate());
    const time = nextMonth.toISOString().split("T")[0]
    return time;
}
async function payBroadbandOrder() {
  let type = {
    accountNumber: account.value,
    meetMoney: `${amount.value}`,
    monthlyRent: `${rent.value}`,
    nextTimePay: `${time.value} 00:00:00`,
    payWay: `${cycleNum.value}`,
    // #ifdef MP-WEIXIN
    payType: "0",
    // #endif
    // #ifndef MP-WEIXIN
    payType: "1",
    // #endif
  };
  console.log(type);

  const res = await payBroadbandCorporateOrderApi(type);
  const { code, data } = res || {};
  if (code == 200) {
    // console.log("data",data);
    // #ifdef MP-WEIXIN
    weixinClick(data);
    // #endif
    // #ifndef MP-WEIXIN
    weChatAppPay(data);
    // #endif
  }
}
/**
 * 唤起支付
 * @param payData
 */
const weixinClick = (payData) => {
  uni.requestPayment({
    provider: "wxpay",
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.prepayId,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
      uni.showToast({
        title: "支付成功",
        duration: 2000,
        success: () => {
          pattern.value = false;
          uni.navigateBack();
        },
      });
    },
    fail: function (err) {
      if (err.errMsg == "requestPayment:fail cancel")
        return uni.showToast({
          title: "您已取消支付",
          duration: 2000,
          icon: "none",
        });
      uni.showToast({ title: "支付失败", duration: 2000, icon: "none" });
      console.log("fail:" + JSON.stringify(err));
    },
  });
};

// 微信APP支付
const weChatAppPay = (payData) => {
  let params = {
    partnerId: payData.partnerId, //商户号
    prepayId: payData.prepayId, //预支付交易会话ID
    nonceStr: payData.nonceStr, //随机字符串
    timeStamp: payData.timeStamp, //时间戳
    sign: payData.paySign, //签名
  };
  window.mobile.jsCallPayWx(JSON.stringify(params));
};
onLoad((option) => {
  console.log("路由参数",option);
  account.value = option.room;
  validate.value =JSON.parse(option.down) ;
  getBroadbandMonthlyRent();
})
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  .title {
    width: 100%;
    font-size: @font-size-39;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .room {
    font-size: @font-size-39;
    font-weight: bold;
    color:@color-red;
  }
}

</style>